import React from 'react';
import { Form, Input, Button, Icon } from 'antd';
// import md5 from 'md5';
import { connect } from 'dva';
import { Dispatch } from 'redux';
// import Service from '@/public/service';
import { FormComponentProps } from 'antd/lib/form';
import router from 'umi/router';
import Cookie from 'js-cookie';
import Service from '@/public/http/services';
import style from './index.css';

const Login: React.FC<ALogin> = ({ form, userInfo, dispatch }) => {
  const { getFieldDecorator } = form;

  function handleLoginSubmit(e: React.FormEvent) {
    e.preventDefault();
    form.validateFields(['username', 'password'], (err, value) => {
      if (!err) {
        // value.password = md5(value.password);
        Service.login(value).then(({ data }: any) => {
          const { token, nickname, username } = data;
          Cookie.set('token', token);
          Cookie.set('user', {
            nickname,
            username
          })
          router.push('/house');
        })
      }
    })
  }
  return (
    <div className={style.login}>
      <div className={style.login_modern}>
        <Form className={style.login_modern_form}
          layout={'horizontal'}
          hideRequiredMark={true}
          labelAlign={'left'}
          onSubmit={handleLoginSubmit}>
          <div className={style.login_modern_title}>家 幼 管 理</div>

          <Form.Item>
            {
              getFieldDecorator('username', {
                validateTrigger: 'onBlur',
                rules: [
                  { required: true, message: '请输入账号' },
                  // { pattern: /^1\d{10}$/, message: '请输入正确账号' },
                ],
              })(<Input className={style.inputCls}
                prefix={<Icon className={style.licn} type={'user'} />}
                name={'username'}
                placeholder={'请输入账号'} />)
            }
          </Form.Item>
          <Form.Item>
            {
              getFieldDecorator('password', {
                validateTrigger: 'onBlur',
                rules: [
                  { required: true, message: '请输入密码' },
                ],
              })(<Input className={style.inputCls}
                prefix={<Icon className={style.licn} type={'key'} />}
                type={'password'}
                name={'password'}
                placeholder={'请输入登录密码'}
              />)
            }
          </Form.Item>
          <Button className={style.submit_btn} type={'primary'} block={true} htmlType={'submit'}>登录</Button>
        </Form>
        <i className={style.copyright}>
          <div>
            <img src={require('@/assets/beian.png')} />
            <a rel="nofollow" href=" " target="_blank" style={{ display: 'inline-block', textDecoration: 'none', color: '#fff', marginRight: '3px' }} id="beiannum"></a>
            <a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank" className="icp ml-10" style={{ display: 'inline-block', marginRight: '10px', color: '#fff', textDecoration: 'none' }}>蜀ICP备19034968号</a>
            <p className="center ml-10 footer-content" style={{ display: 'inline-block', color: '#fff' }}>成都家幼百宝箱教育科技有限公司 版权所有</p>
          </div>
        </i>
      </div>
    </div>
  )
}

interface ALogin extends FormComponentProps {
  dispatch: Dispatch,
  userInfo: { username: string, password: string, nickname?: string }
}

const WrappedAppLogin = Form.create<ALogin>({ name: 'appLogin' })(Login)
export default connect((state: any) => {
  return {
    userInfo: state.global.userInfo
  }
})(WrappedAppLogin);
